transaction filters

2 files changed, 79 insertions, 10 deletions

diff --git a/src/routes/[username]/transactions/[...page]/+page.server.js b/src/routes/[username]/transactions/[...page]/+page.server.js
index faa8a1ab..caa2e155 100644
--- a/src/routes/[username]/transactions/[...page]/+page.server.js
+++ b/src/routes/[username]/transactions/[...page]/+page.server.js
@@ -3,12 +3,24 @@ import { get, auth } from '$lib/utils';
 let offset = 25;
 
 export async function load({ cookies, params, request }) {
-	let page = parseInt(params.page || 1);
-	let transactions = await get('/payments', auth(cookies));
+	let parts = params.page.split('/');
+
+	let start, end, page;
+	if (parts.length === 1) [page] = parts;
+	if (parts.length === 2) [start, page] = parts;
+	if (parts.length === 3) [start, end, page] = parts;
+	if (!parseInt(page)) page = 1;
+
+	let url = '/payments';
+	if (start && end) url += `?start=${start}&end=${end}`;
+	else if (start) url += `?start=${start}`;
+	else if (end) url += `?end=${end}`;
+
+	let transactions = await get(url, auth(cookies));
 	let total = transactions.length;
 	let pages = new Array(Math.ceil(total / offset));
 	let i = (page - 1) * offset;
 	transactions = transactions.slice(i, i + offset);
 
-	return { total, transactions, page, pages };
+	return { total, transactions, page, pages, start, end };
 }
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index b957caf8..cf809445 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -1,23 +1,61 @@
 <script>
+	import { Icon } from '$comp';
 	import { onMount } from 'svelte';
 	import { formatDistance, parseISO } from 'date-fns';
 	import { newPayment } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { f, s, sats } from '$lib/utils';
 	import { page } from '$app/stores';
+	import { differenceInDays, getUnixTime, sub } from 'date-fns';
 
 	export let data;
 
-	let { user } = data;
+	let { start, end, user } = data;
+
+	let presets = [
+		{ title: 'Today', start: sub(new Date(), { days: 1 }), end: null },
+		{ title: '7 days', start: sub(new Date(), { days: 7 }), end: null },
+		{ title: 'Last month', start: sub(new Date(), { months: 1 }), end: null },
+		{ title: 'All', start: null, end: null }
+	];
+
+	$: selection = start
+		? presets.findIndex((p) => Math.abs(differenceInDays(new Date(start * 1000), p.start)) < 1)
+		: presets.length - 1;
 
 	let p,
 		total,
 		transactions = [],
 		pages = [];
-	$: data && ({ page: p, pages, total, transactions } = data);
+	$: data && ({ page: p, pages, start, end, total, transactions } = data);
 
 	$: $page && ($newPayment = false);
 	$: $newPayment && invalidate(`/users/${user.username}`);
+
+	let csv = () => {
+		const keys = ['hash', 'updatedAt', 'rate', 'currency', 'amount', 'fee', 'tip'];
+		const csv =
+			keys.map((k) => `"${k}"`).join(',') +
+			'\n' +
+			transactions.map((r) => keys.map((k) => `"${r[k]}"`).join(',')).join('\n');
+
+		const filename = 'transactions.csv';
+		let blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+		if (navigator.msSaveBlob) {
+			navigator.msSaveBlob(blob, filename);
+		} else {
+			let link = document.createElement('a');
+			if (link.download !== undefined) {
+				let url = URL.createObjectURL(blob);
+				link.setAttribute('href', url);
+				link.setAttribute('download', filename);
+				link.style.visibility = 'hidden';
+				document.body.appendChild(link);
+				link.click();
+				document.body.removeChild(link);
+			}
+		}
+	};
 </script>
 
 <div class="mt-24 mb-20">
@@ -26,13 +64,32 @@
 	</h1>
 
 	<div class="container w-full mx-auto md:text-lg px-10 lg:px-72">
-		<div class="flex flex-wrap justify-end mb-8">
+		<div class="flex text-md text-secondary flex-wrap mb-4">
+			<div class="flex flex-wrap gap-2">
+				{#each presets as { start, end, title }, i}
+					<a
+						class:active={selection === i}
+						href={`/${user.username}/transactions/${start ? getUnixTime(start) + '/' : ''}1`}
+					>
+						<button class="rounded-full border py-2 px-5 hover:opacity-80 mb-2">
+							<div class="my-auto">{title}</div>
+						</button>
+					</a>
+				{/each}
+			</div>
+			<button class="ml-auto rounded-xl border py-2 px-5 hover:opacity-80 mb-2 flex" on:click={csv}>
+				<Icon icon="save" style="opacity-50 mr-2" />
+				<div class="my-auto">Export</div>
+			</button>
+		</div>
+
+		<div class="flex flex-wrap justify-center mb-8">
 			{#if pages.length > 1}
 				{#each pages as _, i}
 					<a
 						class="mr-1 last:mr-0"
 						href={`/${user.username}/transactions/${i + 1}`}
-						class:active={p === i + 1}
+						class:active={parseInt(p) === i + 1}
 					>
 						<div class="border py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center">
 							{i + 1}
@@ -44,7 +101,7 @@
 
 		<div class="text-secondary grid grid-cols-3 mb-5">
 			<h2>{$t('user.transactions.AMOUNT')}</h2>
-			<h2 class="text-center">{$t('user.transactions.TYPE')}</h2>
+			<h2 class="text-center" />
 			<h2 class="text-right">{$t('user.transactions.TIME')}</h2>
 		</div>
 
@@ -85,7 +142,7 @@
 </div>
 
 <style>
-	.active div {
-		@apply bg-gray-100;
+	.active * {
+		@apply bg-black text-white border-black;
 	}
 </style>